import React, { Component, } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, AsyncStorage, } from 'react-native';
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
import connect from '../../app/store/connect';
import urls from '../../app/constants/urls';
import { saveToken, getUserId, } from '../../commons/utils/passport';
import { GET, POST, } from '../../commons/utils/request';
import Toast from '../../components/Toast'


const styles = StyleSheet.create({
  container:
  {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingBottom: 25,
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 15
  },
  line:
  {
    height: 0.6,
    backgroundColor:"#E5E5E5",
  },
  lineContainerTop: {
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 10,
  },
  lineContainerBtm: {
    flexDirection: 'row',
    paddingBottom: 10,
  },
  txtTitle: {
    fontSize: 16,
    color: "#212121",
    alignItems: 'flex-start'
  },
  txtAmount: {
    fontSize: 16,
    color: "#0091ff",
    position:'absolute',
    right: 0,
    top: 10,
  },
  txtTime: {
    fontSize: 12,
    color: "#B6B9C2",
  },
  txtStatus: {
    flexDirection: 'row',
    position:'absolute',
    color: "#FF7D41",
    fontSize: 12,
    right: 0,
    bottom: 10,
  }
});

export default class OrderList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderList: []
    }
  }

  async queryOrderInfo() {
      const params = {
        pageSize: 1000,
      }
    await POST(urls.dealList, JSON.stringify(params)).then(resp => {
        console.log('TAGGG', `queryOrderInfo====resp==${JSON.stringify(resp)}`);
        // Toast.show({ title: JSON.stringify(resp), });
        if (resp && resp.code == 0 && resp.data) {
            console.log('TAGGG', `queryOrderInfo====resp=setState=====}`);
            this.setState({orderList: resp.data.data})
        }
      });
  }

  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '交易列表'
  });

  componentDidMount() {
    this.queryOrderInfo()
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView ref="ScrollView">
          {this.renderOrderList()}
        </ScrollView>
      </View>
    );
  }

  renderOrderList() {
    const data = this.state.orderList
    if(!data) {
        return
    }
    const list = [];
    for (let j = 0; j < data.length; j++) {
      const element = data[j];
      console.log('TAGGG', element);
      const cityCell =
        (<TouchableOpacity
          key={element.name + j}
          onPress={() => {
            this.props.navigation.navigate('OrderDetail', {data: element});
          }}
        >
          <View style={styles.lineContainerTop}>
            <Text style={styles.txtTitle}>{ element.receiverName }</Text>
            <Text style={styles.txtAmount}>{ element.dealType == 1 ? ('+ ' + element.dealAmount) :  ('- ' + element.dealAmount) }</Text>
          </View>
          <View style={styles.lineContainerBtm}>
            <Text style={styles.txtTime}>{ element.dealTime }</Text>
            <Text style={styles.txtStatus}>{ element.dealStateStr }</Text>
          </View>
          <View style={styles.line}></View>
        </TouchableOpacity>);
      list.push(cityCell);
    }
    return list;
  }
}
